<template>
    <div class="div_main_frame" style="text-align:center;margin:0 auto" align="center">
    <div class="fastweb_div_middle div_entity_display" style="width:1500px;text-align:center;height:auto;position:relative;">
        <div class="div_main_frame" style="width:80%;float:left;margin:auto">
            <div class="div_main_frame" style="width:50%;float:left;margin:0px;padding:0px;">
                <ArrtData :json_data="json_data" />
            </div>

            <div class="div_main_frame" style="width:50%;float:left;margin:0px;padding:0px;">
                <ArrtData :json_data="json_data" />
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="div_main_frame" style="width:20%;float:left;margin:auto">
            
        </div>
       
        <div style="clear:both"></div>
    </div>

    <div class="fastweb_div_middle" style="border:1px solid red;width:1500px;text-align:center;height:auto">
        <Tabs/>
    </div>
    </div>

    
    
    <Footer/>
</template>

<script>

import Footer from '@/components/Footer.vue'
import Entity from '@/components/Entity.vue'
import LeftAttr from '@/components/LeftAttr.vue'
import RightAttr from '@/components/RightAttr.vue'
import Tabs from '@/components/Tabs.vue'
import { getCurrentInstance } from 'vue'

export default 
{
    name: 'SearchV2',
    components: {
        Footer,
        Entity,
        LeftAttr,
        RightAttr,
        Tabs
    },
    data () {
      return {
        title: '',
        entity: '',
        datas: '',
        json_data: {
            name: '',
            nodes: [],
        },
        message: '',
      };
    },
    setup(){
      const host = getCurrentInstance()?.appContext.config.globalProperties.host
      return {host}
    },
    beforeRouteEnter(to, from, next){
      console.log("beforeRouteEnter");
      next(vm => {
        vm.title = to.meta.title;
        let url = vm.setRequestUrl(to.fullPath);
        vm.getDatas(url, vm.pageNum, vm.pageSize);
      });
    },
    beforeRouteUpdate(to){
      console.log("beforeRouteUpdate");
      let url = this.setRequestUrl(to.fullPath);
      this.getDatas(url, this.pageNum, this.pageSize);
      return true;
    },
    methods: {
      getDatas(url){
        var type = this.$route.query.type
        var code = this.$route.query.code
        var name = this.$route.query.name
        console.log("getDatas:" + url);
        
        var api_url = this.host.concat("/api/get_data?type=").concat(type).concat("&code=").concat(code).concat("&name=").concat(name);
          this.axios.get(api_url)
          .then(response => {
            if((response.status == 200) && (response.data.result == 0)){
              this.datas = response.data.data;
              this.json_data = JSON.parse(response.data.data);
              this.entity = this.json_data.name;
              this.title = this.json_data.name;
            }
          })
          .catch(error => alert(error));

        this.message = '';
        
        /*
        var response = '{"name":"晨鸣纸业","link":"url","pic":"url","type":1,"nodes":[{"type":2,"name":"指数","pic":"url","nodes":[{"type":3,"name":"沪深300","pic":"url","link":"url","nodes":[{"type":3,"name":"太阳纸业","pic":"url","link":"url"},{"type":3,"name":"青山纸业","pic":"url","link":"url"}]},{"type":2,"name":"上证50","pic":"url","nodes":[{"type":3,"name":"中石油","pic":"url","link":"url"}]}]},{"type":2,"name":"特色","pic":"url","nodes":[{"type":3,"name":"纸浆一体化","pic":"url","link":"url","nodes":[{"type":3,"name":"中顺洁柔","pic":"url","link":"url"},{"type":3,"name":"中石化","pic":"url","link":"url","nodes":[{"type":3,"name":"AAA1_1","pic":"url","link":"url"}]}]}]},{"type":2,"name":"指数","pic":"url","nodes":[{"type":3,"name":"沪深300","pic":"url","link":"url","nodes":[{"type":3,"name":"太阳纸业","pic":"url","link":"url"},{"type":3,"name":"青山纸业","pic":"url","link":"url"}]},{"type":2,"name":"上证50","pic":"url","nodes":[{"type":3,"name":"中石油","pic":"url","link":"url"}]}]},{"type":2,"name":"指数","pic":"url","nodes":[{"type":3,"name":"沪深300","pic":"url","link":"url","nodes":[{"type":3,"name":"太阳纸业","pic":"url","link":"url"},{"type":3,"name":"青山纸业","pic":"url","link":"url"}]},{"type":2,"name":"上证50","pic":"url","nodes":[{"type":3,"name":"中石油","pic":"url","link":"url"}]}]}]}';
        this.datas = response;
        this.json_data = JSON.parse(response);
        this.entity = this.json_data.name;
        this.title = this.json_data.name;
        console.log("name:", this.json_data.name)
        */
      },
      //动态设置服务端数据接口的请求URL
      setRequestUrl(path){
        let url = path;
        console.log("paht:", path);
        return url;
      },
    },
    watch: {
      // 如果路由发生变化，再次执行该方法
      "$route": "getDatas"
    }
}

</script>

<style scoped>

.div_entity_data {
    display:table;
}

.div_entity_main {
    height:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

.div_entity_display {
    background-color: #EEEEEE;
}


.left_bracket_container {
  width:100%;
  height:100%;
  padding-top:20px;
  padding-bottom:20px;
  height:100%;
  position:absolute;
  left:43%;
  top:0;
  bottom:0;
}

.right_bracket_container {
  width:100%;
  height:100%;
  padding-top:20px;
  padding-bottom:20px;
  height:100%;
  position:absolute;
  top:0;
  right:43%;
  bottom:0;
}

.bracket_container {
  height:100%;
  width:100%;
  margin:0px;
  padding:0px;
}

.left_bracket_line_container {
  width:16px;
  height:100%;
  position:relative;
  float:left;
}

.right_bracket_line_container {
  width:16px;
  height:100%;
  position:relative;
  float:right;
}

.bracket_line {
  width:12px;
  border-top:1px solid black;
  height:0px;
  text-align:center;
  margin: auto;
  position:absolute;
  left: 0;
  top: 0;
  bottom:0;
  right: 0;
}
.bracket_left_edge {
  width:10px;
  height:100%;
  line-height:100%;
  text-align:center;
  border-left:1px solid black;
  border-top:1px solid black;
  border-bottom:1px solid black;
  float:right;
}
.bracket_right_edge {
  width:10px;
  height:100%;
  line-height:100%;
  text-align:center;
  border-right:1px solid black;
  border-top:1px solid black;
  border-bottom:1px solid black;
  float:left;
}

</style>
